<template>
  <div id="content">
    <van-nav-bar title="宠物乐园" :border="false" />
    <van-search
      shape="round"
      background="#ffffff"
      placeholder="请输入搜索关键词"
      clear-trigger="always"
      @focus="$router.push('/search')"
    />
    <van-row>
      <van-col span="12">
        <RouterLink to="/message" class="rou">
          <p>宠物领养</p>
          <div>领养一只宠物</div>
          <div>陪伴自己</div>
        </RouterLink>
      </van-col>
      <van-col span="12">
        <RouterLink to="/adopt" class="rou">
          <p>宠物送养</p>
          <div>为可爱的小动物找到</div>
          <div>一个温暖的家</div>
        </RouterLink>
      </van-col>
    </van-row>
    <div id="topic">
      <span></span>
      <span>爱宠推荐</span>
    </div>
    <div class="highly">
      <div class="body">
        <RouterLink
          :to="`/redetail/${item.pid}`"
          v-for="(item, index) in list"
          :key="item.pid"
        >
          <Recommend
            :imgname="listImg[index]"
            :title="item.title"
            :age="item.age"
            :label="item.label"
            :sex="item.sex"
            :area="item.area"
          />
        </RouterLink>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecommend, getRecommendImg } from "@/api/recommend";
import Recommend from "@/components/recommend.vue";
export default {
  data() {
    return {
      list: "",
      listImg: [],
    };
  },
  methods: {
    // 获取所有推荐
    async getRec() {
      const data = await getRecommend();
      console.log(data);
      this.list = data.data.message;
      console.log(this.list);
    },
    // 获取所有推荐的图片
    async getRecImg() {
      const data = await getRecommendImg();
      console.log("b:");
      console.log(data);
      data.data.message.forEach(item => {
        this.listImg.push(item.imgname);
      });
    },
  },
  mounted() {
    this.getRec();
    this.getRecImg();
  },
  components: {
    Recommend,
  },
};
</script>

<style lang="scss" scoped>
#content {
  width: 100%;
  height: 100vh;
  background: -webkit-gradient(linear, 0% 0%, 0% 35%, from(#face23), to(#fff));
  border-top: 1px solid #face24;

  .van-nav-bar {
    margin-top: 30px;
    background: none;

    ::v-deep .van-nav-bar__title {
      font-family: "黑体";
      font-size: 20px;
      color: #333333;
    }
  }

  .van-search {
    width: 95%;
    margin: 0 auto;
    background: none !important;
  }

  .van-row {
    width: 315px;
    margin: 15px auto;

    .van-col {
      height: 110px;
      width: 150px;
      margin-right: 15px;
      border-radius: 10px;
      font-family: "黑体";
      color: #fff !important;
      overflow: hidden;
      font-size: 17px;

      &:first-child {
        background-image: linear-gradient(to top left, #569dff, #70acff);

        // &:active {
        // }
      }

      &:last-child {
        margin-right: 0;
        background-image: linear-gradient(to top left, #0fc39a, #43debb);
      }

      p {
        margin: 20px 0 0 10px;
        padding: 0;
      }

      div {
        margin: 10px 0 -6px 10px;
        padding: 0;
        font-size: 12px;
      }
    }
  }

  #topic {
    width: 315px;
    height: 22px;
    margin: 0 auto;
    line-height: 22%;
    font-family: "黑体";

    span:first-child {
      width: 2px;
      height: 12px;
      display: inline-block;
      background: #ffcc1f;
    }

    span:nth-child(2) {
      font-size: 18px;
      margin-left: 5px;
      color: #333333;
      // font-weight: bold;
    }

    .more {
      color: #a3a3a3;
      font-size: 14px;
      float: right;
      margin-top: -2px;

      .van-icon {
        margin-left: -2px;
      }

      &:active {
        color: #ffc812;
        // background: #ffc812;
      }
    }
  }
  .highly {
    height: 310px;
    // background-color: #face23;
    overflow: scroll;
    .body {
      width: 315px;
      margin: 0 auto;
      margin-top: 5px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
}

.rou {
  color: #fff;
}
</style>
